<template>
  <div class="wrapper">
    <div class="top">
      <div class="logo">
        <div class="name">社团管理平台</div>
      </div>
    </div>
    <div class="main">
      <div class="l-part">
        <NavBar></NavBar>
        <!-- 左下圆形部分是否出现由路径决定 -->
        <div class="round"></div>
        <div class="lround"></div>
      </div>
      <div class="r-part">
        <div class="sign">
          <div class="brand" v-if="route.meta.brand">
            <div class="top-l pillar"></div>
            <div class="top-r pillar"></div>
            <div class="bottom">
              <template v-if="!route.meta.isAssociation">目前为第{{ x }}轮面试</template>
            </div>
          </div>
        </div>
        <router-view></router-view>
      </div>
      <div class="suspended-ball">
        <div
          v-if="route.meta.logout"
          class="ball"
          @click="cancel"
          style="background-color: #54a1ad"
        >注销</div>
        <div
          v-if="route.meta.return"
          class="ball"
          @click="cancel"
          style="background-color: #54a1ad"
        >返回</div>
        <div
          class="ball"
          v-if="route.meta.change"
          @click="change"
          style="background-color: #4e88b7"
        >
          切换
          <br />身份
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import AdaptScreen from "./utils/AdaptScreen";
import NavBar from "../src/components/NavBar.vue";
import { onMounted, ref, watch } from "vue";

onMounted(() => {
  new AdaptScreen().init();
});

const cancel = () => {
  sessionStorage.removeItem("assId");
  sessionStorage.removeItem("depId");
  router.push({ name: "Login" });
};

const change = () => {
  sessionStorage.removeItem("depId");
  router.push({ name: "Choose" });
};
const route = useRoute();
const router = useRouter();

let x = ref();

window.addEventListener('setItem', () => {
  x.value = sessionStorage.getItem("x");
})


</script>

<style lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070,
  //边框颜色
    "W-blue": #20618c,
  "L-blue": #3f8989,
  "green": #158f9c
);

body {
  background-color: #f5f5f5;
}
.wrapper {
  background-color: #f5f5f5;
  width: 1899px;
  margin: 0 auto;
  .top {
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 100;
    height: 7.9375rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    .logo {
      margin-left: 3.4375rem;
      .name {
        font-size: 3.125rem;
        font-weight: bold;
        color: map-get($map: $colors, $key: t-blue);
      }
    }
  }
  .main {
    display: flex;
    background-color: map-get($map: $colors, $key: t-white);
    .l-part {
      position: sticky;
      top: 127px;
      left: 0px;
      overflow: hidden;
      display: inline-block;
      padding-top: 50px;
      width: 25%;
      height: 768px;
      .round {
        position: absolute;
        left: -28%;
        bottom: 0px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-color: map-get($map: $colors, $key: t-blue);
      }
      .lround {
        position: absolute;
        bottom: 260px;
        left: 280px;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background-color: #4e88b7;
      }
    }
    .r-part {
      height: 100%;
      width: 70%;
      display: inline-block;
      .sign {
        height: 106px;
        position: relative;
        .pillar {
          position: absolute;
          width: 15px;
          height: 23px;
          background-color: map-get($map: $colors, $key: border);
        }
        .top-l {
          left: 1100px;
        }
        .top-r {
          left: 1215px;
        }
        .bottom {
          position: absolute;
          width: 232px;
          height: 70px;
          background-color: #3f89b9;
          box-shadow: 3px 3px 5px map-get($map: $colors, $key: border);
          border-radius: 50px;
          top: 23px;
          left: 1048px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 25px;
          font-weight: bold;
          color: white;
        }
      }
    }
    .suspended-ball {
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: 100px;
      right: 0px;
      .ball {
        cursor: pointer;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        margin-bottom: 5px;
        background: #54a1ad;
        font-size: 20px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.info-box {
  width: 300px;
  height: 80px;
  .triangle {
    width: 0px;
    height: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    border-top: 55px solid transparent;
    border-bottom: 55px solid transparent;
    border-right: 30px solid #3f89b9;
  }
  .round {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #158f9c;
  }
  p {
    font-size: 30px;
    font-weight: bold;
    color: #3f89b9;
    position: absolute;
    top: 40px;
    left: 90px;
  }
}
.el-notification__closeBtn {
  position: absolute !important;
  top: 5px !important;
}
</style>

